.XNHLoginPage {
	width: 100vw;
	height: 100vh;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;

	& > .top {
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 180px;
		z-index: 1;

		& > img {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		& > div {
			position: relative;
			width: 100%;
			display: flex;
			justify-content: flex-start;
			font-size: 52px;
			font-family: YouSheBiaoTiHei;
			font-weight: 400;
			color: #ffffff;
			background: linear-gradient(
				0deg,
				rgba(128, 185, 255, 1) 0%,
				rgba(255, 255, 255, 1) 100%
			);
			background-clip: text;
			-webkit-text-fill-color: transparent;
			z-index: 2;
			text-indent: 45px;
			line-height: 100px;
		}
	}

	& > .bottom {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 52px;
		z-index: 1;
	}

	& > .LoginBack {
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: -1;
	}

	& > .LoginBackAmin {
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: -2;
	}

	& > .LoginBox {
		position: relative;
		width: 730px;
		height: 490px;
		margin-top: 80px;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;

		& > .LoginBoxBack {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			display: block;
			z-index: -1;
		}

		& > .title {
			height: 1px;
			font-size: 53px;
			font-family: YouSheBiaoTiHei;
			font-weight: 400;
			color: #ffffff;
			line-height: 80px;
		}

		& > .LoginBoxTitle {
			width: 411px;
			height: 96px;
			position: relative;

			& > img {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
			}

			& > div {
				position: relative;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 2;
				font-size: 36px;
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				color: #ffffff;
			}
		}

		& > .SingUp {
			width: 100%;
			height: 500px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			position: relative;

			& > .SignUpForm {
				width: 70%;
				margin-top: 70px;

				& > .ant-form-item {
					margin-bottom: 35px;
				}

				& > .SignUpBtn {
					margin-bottom: 0;

					button {
						height: 55px;
						background: linear-gradient(0deg, #001432, #006aa0);
						border: 2px solid #a5eafd;
						border-radius: 50px;
						font-size: 24px;
						font-family: YouSheBiaoTiHei;
						font-weight: 400;
						color: #b2fbfd;
					}
				}

				.ant-input-affix-wrapper {
					height: 55px;
					font-size: 25px;
					background-color: #081520;
					color: #c8e1ff;
					border: none;
					border-radius: 50px;
					position: relative;
					padding: 4px 25px;

					&::after {
						position: absolute;
						content: "";
						left: 25px;
						bottom: -2px;
						width: calc(100% - 50px);
						height: 2px;
						background: #c8e1ff;
						z-index: 1;
					}

					input {
						text-indent: 15px;
						font-size: 20px;
						background-color: #081520;
						color: #c8e1ff;
					}

					.ant-input-password-icon.anticon {
						color: #c8e1ff;
					}
				}
			}

			& > .CodeUpBox {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				& > #QRcode {
					height: 280px;
					overflow: hidden;

					& > iframe {
						height: 280px !important;
					}
				}
			}

			& > .or {
				font-size: 20px;
				font-weight: 400;
				color: #ffffff;
				line-height: 40px;
			}

			& > .tabs {
				cursor: pointer;
				font-size: 18px;
				font-weight: 400;
				text-decoration: underline;
				color: #73b2ff;
			}

			& > .plugInUnit {
				position: absolute;
				right: 48px;
				bottom: 40px;
				cursor: pointer;
				font-size: 14px;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #b2fbfd;
				user-select: none;
			}
		}
	}
}
